<!-- 卡片>核心指标 -->
<template>
<div class="columnChart">
    <div class="container">
        <div class="card-title" style="cursor: default;">
            <span class="card-title-text">核心指标</span>
        </div>
        <div class="card-heart-content">
            <div class="card-heart">
              <div class="left">
                  <!-- 跳转》高危信号 -->
                  <div class="list top" @click="$Ctl.enterDetail( 'HighRiskSignal',{orgId:orgIds})">
                    <span>高危信号</span>
                    <p>{{ highDangerNumber }}</p>
                  </div>
                  <!--  跳转》重大问题 -->
                  <div class="list" @click="$Ctl.enterDetail( 'ImportQuestion',{orgId:orgIds})">
                    <span>重大问题</span>
                    <p class="impor">{{ importantNumber }}</p>
                  </div>
              </div>
              <div class="right">
                <div class='track1'></div>
                <div class='track2'></div>
                <div class='track3'></div>
              </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import { getCoreIndex } from "@/api/organization"
export default {
  props: {
    orgId: {
      default() {
        return false
      }
    }
  },
  data() {
    return {
      highDangerNumber:0, //高位信号
      importantNumber:0,//重大问题
      orgIds:this.$store.state.userInfo.organizationIds,
      isMuilUnitUser:this.$store.state.userInfo.isMuilUnitUser//0:单单位用户;1:多单位用户
    }
  },
  methods: {
    getRiskAndImportNumber(){
      let that = this;
      getCoreIndex({
          orgIds:that.orgIds,
      }).then(res =>{
          if(res.status === 200){
            that.highDangerNumber = res.data.highRiskFireCount;
            that.importantNumber = res.data.importantCount;
          }
      });
    },
  },
  created() {
    let that = this;
    that.getRiskAndImportNumber();

    if(!that.isMuilUnitUser || (that.isMuilUnitUser && !that.orgId)){//推送只推一级首页
      window.FunList.highRiskFireCount_ws = function(wsData){
          that.highDangerNumber = wsData.orgCount
      }
      window.FunList.importantCount_ws = function(wsData){
          that.importantNumber = wsData.orgCount
      }
    }
  }
}
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.columnChart{
  height: 100%;
  width: 100%;
  font-size: 16px;
  .container{
     height: 100%;
     width: 100%;
     .card-heart-content{
       width: 100%;
       height: calc(100% - 32px);
       display: flex;
       padding: 0 6%;
       .card-heart{
          width: 100%;
          display: flex;
          flex-direction: row; //属性决定主轴的方向（即项目的排列方向）
          justify-content: space-between; //项目在主轴上的对齐方式
          align-items: center;//定义项目在交叉轴上如何对齐
       }
       .left{
          width: 45%;
          .list{
            position: relative;
            // background: url(../../assets/images/homeLeft/heartbg.png) 0 0 no-repeat;
            padding-left: 15px;
            padding-top: 6px;
            cursor: pointer;
            background-size: cover;
            background: -webkit-linear-gradient(to right, rgba(29, 53, 84, 0.6), rgba(255, 255, 255, 0));
            background: -o-linear-gradient(to right, rgba(29, 53, 84, 0.6), rgba(255, 255, 255, 0));
            background: -moz-linear-gradient(to right, rgba(29, 53, 84, 0.6), rgba(255, 255, 255, 0));
            background: linear-gradient(to right, rgba(29, 53, 84, 0.6), rgba(255, 255, 255, 0));
            border-left: 2px solid #4092e1;
            &::before {
              position: absolute;
              left: -1px;
              top: 25%;
              content: ''; 
              display: block;
              width: 1px;
              height: 50%;
              background-color: #142940;
            }
            &.top{
              margin-bottom: 15px;
            }
            span{
              color: #A3BEDD;
              font-size: 1.125em;
            }
            p{
              height: 52px;
              color: #CD3350;
              font-size: 2.5em;
              padding: 0;
              margin: 0;
              margin-left: -4px;
              &.impor{
                color: #F0A045;
              }
            }
          }
       }
     }
    .right{
      position: relative;
      padding-right: 8%;
      width: 55%;
      height: 100%;
      background: url(../../assets/images/homeLeft/important-flag.png) center center no-repeat;
      background-size: contain;
      animation: scaning 5s linear infinite;
      .track1,
      .track2,
      .track3 {
        position: absolute;
        top: calc(50% - 30px);
        left: calc(50% - 30px);
        width: 60px;
        height: 60px;
        border: 3px solid #e95cb5;
        // border-image: linear-gradient(#e848a1, #ed9df5) 20 20;
        border-radius: 50%;
        &::before {
          content: ''; 
          display: block;
          width: 10px;
          height: 20px;
          border-radius: 50%;
        }
      }
      .track1 {
        transform: rotateX(62deg) rotateY(0deg) rotateZ(0deg);
        animation: track-one 1.4s linear infinite;
        &::before {
          background-image: linear-gradient(#deb7f4, #b56df8);
          animation: track-one-ball 1.4s linear infinite;
        }
      }
      .track2 {
        transform: rotateX(45deg) rotateY(45deg) rotateZ(0deg);
        animation: track-two 1.9s linear infinite;
        &::before {
          background-image: linear-gradient(#27baff);
          animation: track-two-ball 1.9s linear infinite;
        }
      }
      .track3 {
        transform: rotateX(45deg) rotateY(135deg) rotateZ(0deg);
        animation: track-three 2.4s linear infinite;
        &::before {
          background-image: linear-gradient(#ecc03f, #f39e2f);
          transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
          animation: track-three-ball 2.4s linear infinite;
        }
      }
    }
  }
}
</style>